
/** 
  课程学习
*/
<template>
    <div>
        <div class="main" style="height:800px;overflow:auto;" v-if="showDetail === 'list'">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
                <el-tab-pane label="我的课程" name="first">
                    <my-Course @toDetail="changekey" :tabVal="tabVal"></my-Course>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="showDetail === 'detail'">
            <course-Detail
                @returnVal="changekey"
                :id="id"
                :tabVal="tabVal"
                :fileName="fileName"
                :pageFrom="pageFrom"
            ></course-Detail>
        </div>
    </div>
</template>
<script>
import myCourse from './common/myCourse'
import courseDetails from './common/courseDetails'
export default {
    components: {
        'my-Course': myCourse,
        'course-Detail': courseDetails
    },
    data() {
        return {
            activeName: 'first',
            showDetail: 'list',
            tabVal: '0',
            id: '',
            fileName: '',
            pageFrom: 'courseStudy'
        }
    },
    created() {},
    methods: {
        changekey(val) {
            this.showDetail = val.val
            this.id = val.id
            this.fileName = val.fileName
            this.tabVal = val.tabVal
        },
        handleClick(tab, event) {}
    }
}
</script>
<style scoped lang="scss">
.main ::v-deep {
    .tabs .el-tabs__item {
        font-size: 20px;
    }
}
</style>